<template>
	<view class="order-detail-layout">
		<my-header>
			<view class="header">
				<view class="status">{{ orderData.status_str }}</view>
				<!--  <view class="time" v-if="orderData.status == 1">支付剩余时间：{{ minute_str }}:{{ second_str }}</view> -->
				<view class="time" v-if="orderData.status == 1">
					支付剩余时间：
					<text class="expired">{{ minute_str }}:{{ second_str }}</text>
				</view>
			</view>
		</my-header>
		<my-content class="content" v-if="resultStatus" :default-padding-top="orderData.status == 1 ? 75 : 45">
			<!-- <image v-if="orderData.status == 5 || orderData.status == 5" mode="widthFix" class="content_bg" src="https://www.dingxians.cn/upload/20230909/64fc482a828c2.png"></image>
		<image v-if="orderData.status != 5 && orderData.status != 5" mode="widthFix" class="content_bg" src="https://www.dingxians.cn/upload/20230909/64fc4b6570296.png"></image>
	 -->
			<!-- <view class="header">
			<view class="status">
				<view>{{ orderData.status_str }}</view>
			</view>
			<view v-if="orderData.status == 1" class="expired_at">
				<view>支付剩余时间： </view>
				<view class="time">{{minute_str}}:{{second_str}}</view>
			</view>
		</view> -->
			<view class="address">
				<!--        <image src="https://www.dingxians.cn/upload/images/common/location.png" class="address_icon"></image>-->
				<view class="address_info">
					<view class="address_user">
						<view class="username">{{ orderData.order_username }}</view>
						<view class="mobile">{{ orderData.order_mobile }}</view>
					</view>
					<view class="address_detail">{{ orderData.order_address }}</view>
				</view>
				<!-- <image style="width: 22rpx;
        height: 22rpx; margin-right: 20rpx;" src="https://www.dingxians.cn/upload/images/common/arrow-right.png"></image> -->
			</view>

			<view class="goods_content">
				<view class="goods_info" v-for="item in orderData.order_detail" :key="item.id">
					<view class="goods-image-bg">
						<image mode="widthFix" class="goods_image" :src="item.goods_image"></image>
						
					</view>
					<view class="goods_item">
						<view class="goods_name">{{ item.goods_name }}</view>
						<view class="goods_attr" v-if="item.attr_values">
							<text class="goods_attr_value">{{ item.attr_values }}</text>
						</view>
						<view class="goods_price_num">
							<view class="goods_price">
								<view class="goods_price_icon">￥</view>
								<view>{{ item.goods_price }}</view>
							</view>
							<view class="goods_num">x {{ item.num }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="goods_box">
				<view class="goods_header">
					<!-- <view class="goods_header_dot"></view> -->
					<view class="goods_header_title">商品信息</view>
				</view>
				<view class="order_item">
					<view class="order_label">商品总价</view>
					<view class="order_text">
						<view class="price_icon">￥</view>
						<view class="price_int">{{ orderData.total_amount }}</view>
					</view>
				</view>
				<view class="order_item">
					<view class="order_label">运费</view>
					<view class="order_text">
						<view class="price_icon">￥</view>
						<view class="price_int">{{ orderData.freight_amount }}</view>
					</view>
				</view>
				<view class="order_item">
					<view class="order_label">包邮券</view>
					<view class="order_text" v-if="orderData.is_freight">
						<view class="price_icon">-￥</view>
						<view class="price_int">{{ orderData.freight_amount }}</view>
					</view>
					<view class="order_text" v-else>无</view>
				</view>
				<view class="order_item">
					<view class="order_label">实付款</view>
					<view class="order_text">
						<view class="price_icon">￥</view>
						<view class="price_int">{{ orderData.pay_amount }}</view>
					</view>
				</view>
			</view>

			<view class="order_box">
				<view class="order_header">
					<!-- <view class="order_header_dot"></view> -->
					<view class="order_header_title">订单信息</view>
				</view>
				<view class="order_item">
					<view class="order_label">订单编号</view>
					<view class="order_text">{{ orderData.order_no }}</view>
				</view>
				<view class="order_item">
					<view class="order_label">创建时间</view>
					<view class="order_text">{{ orderData.created_at }}</view>
				</view>
				<view class="order_item">
					<view class="order_label">支付方式</view>
					<view class="order_text">{{ orderData.pay_type_str }}</view>
				</view>
				<view class="order_item">
					<view class="order_label">订单类型</view>
					<view class="order_text">{{ orderData.type_str }}</view>
				</view>
				<view class="order_item">
					<view class="order_label">备注信息</view>
					<view class="order_text" v-if="orderData.remark">{{ orderData.remark }}</view>
					<view class="order_text" v-else>无</view>
				</view>
			</view>

			<view class="bottom">
				<view class="bottom_text">
					<view class="bottom_text_num">
						共
						<text style="color: #ee5093">{{ orderData.num }}</text>
						件
					</view>

					<view class="bottom_text_amount">
						<view class="amount_icon">合计：</view>
						<view class="amount_int">{{ orderData.pay_amount }}</view>
					</view>
				</view>
				<view class="exchange_btn btn-primary cancel" @click="del(orderData.id)"
					v-if="orderData.action.del_btn">删除订单</view>
				<view class="exchange_btn btn-primary cancel" @click="cancel(orderData.id)"
					v-if="orderData.action.cancel_btn">
					取消订单
				</view>
				<view class="exchange_btn btn-primary pay" @click="pay(orderData)"
					v-if="orderData.action.pay_btn && !payed">立即支付</view>
				<view class="exchange_btn btn-primary pay" v-if="orderData.action.pay_btn && payed">立即支付</view>
				<view class="exchange_btn btn-primary pay" @click="receive(orderData.id)"
					v-if="orderData.action.receive_btn">
					确认收货
				</view>
				<!-- <view style="visibility: hidden; margin-left: 10rpx">1</view> -->
			</view>

		</my-content>
		<my-alert-dialog ref="alertDialog" title="提示" content="确定取消订单吗？" cancelString="暂不"
			@confirm="handleConfirm"></my-alert-dialog>

		<my-alert-dialog ref="delDialog" title="提示" content="确定要删除订单嘛?" @confirm="handelDelOrder"></my-alert-dialog>
		<my-alert-dialog ref="receiveDialog" title="提示" content="确定收货嘛？"
			@confirm="handleReceiveDialog"></my-alert-dialog>
	</view>
</template>

<script>
	import api from '../../api/index.js'

	export default {
		data() {
			return {
				orderData: {
					order_detail: [],
					action: {},
				},
				order_id: '',
				resultStatus: false,
				minute: '',
				second: '',
				minute_str: '',
				second_str: '',
				payed: false, //是否处于支付中防止连续点击
			}
		},
		onLoad(option) {
			this.order_id = option.id
			this.getOrder()
		},
		onShow() {
			this.payed = false
		},

		methods: {
			handleReceiveDialog(id) {
				api.orders
					.receive(id)
					.then((res) => {
						if (res.code === 200) {
							this.show('收货成功')
							this.getOrder()
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			receive(id) {
				this.$refs.receiveDialog.show(id)
			},
			getOrder() {
				uni.showLoading({
					title: '数据加载中',
				})
				api.orders
					.show(this.order_id)
					.then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							this.resultStatus = true
							this.orderData = res.data
							console.log(this.orderData)
							if (this.orderData.status === 1) {
								this.minute = parseInt(this.orderData.expired_second / 60)
								this.second = parseInt(this.orderData.expired_second % 60)
								let timer = setInterval(() => {
									this.second--
									if (!this.second) {
										if (!this.minute) {
											clearInterval(timer)
											this.orderData.status = 5
										} else {
											this.second = 59
											this.minute--
										}
									}
									this.minute_str = this.minute < 10 ? '0' + this.minute : this.minute
									this.second_str = this.second < 10 ? '0' + this.second : this.second
								}, 1000)
							}
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			handleConfirm(id) {
				api.orders
					.cancel(id)
					.then((res) => {
						if (res.code === 200) {
							this.show('删除成功')
							this.getOrder()
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			cancel(id) {
				this.$refs.alertDialog.show(id)
				/* uni.showModal({
				  title: '提示',
				  content: `确定取消订单吗？`,
				  success: (result) => {
				    if (result.confirm) {
				      
				    } else if (res.cancel) {
				      console.log('用户点击取消')
				    }
				  },
				}) */
			},
			handelDelOrder(id) {
				api.orders
					.del(id)
					.then((res) => {
						if (res.code === 200) {
							this.show('删除成功')
							this.getOrder()
						} else {
							this.show('删除失败')
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			del(id) {
				this.$refs.delDialog.show(id)
			},
			pay(item) {
				api.orders
					.edit(item.id)
					.then((res) => {
						if (res.code === 200) {
							// 微信支付
							if (item.pay_type == 1) {
								let pay_data = res.data.data
								// #ifdef APP-PLUS
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
										appid: pay_data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
										noncestr: pay_data.noncestr, // 随机字符串
										package: pay_data.package, // 固定值
										partnerid: pay_data.partnerid, // 微信支付商户号
										prepayid: pay_data.prepayid, // 统一下单订单号
										timestamp: pay_data.timestamp, // 时间戳（单位：秒）
										sign: pay_data.sign, // 签名，这里用的 MD5/RSA 签名
									},
									success: (res) => {
										this.payed = false
										this.getOrder()
									},
									fail: (error) => {
										this.payed = false
										this.getOrder()
									},
								})
								// #endif
								// #ifdef MP-WEIXIN
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: pay_data.timeStamp.toString(),
									nonceStr: pay_data.nonceStr,
									signType: 'MD5',
									package: pay_data.package,
									paySign: pay_data.paySign,
									success: (res) => {
										this.payed = false
										this.getOrder()
									},
									fail: (err) => {
										this.payed = false
										this.getOrder()
									},
								})
								// #endif
							} else if (item.pay_type == 2) {
								let pay_data = res.data.data
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: pay_data,
									success: (res) => {
										this.payed = false
										this.getOrder()
									},
									fail: (error) => {
										this.payed = false
										this.getOrder()
									},
								})
							}
						} else if (res.code === 400) {
							// 金币不足的情况，跳转充值页面
							// console.log('金币不足')
							// uni.navigateTo({ url: '/pages/user/recharge?amount=12' })
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.order-detail-layout {
		min-height: 100vh;
		background-color: #000;
	}

	.header {
		color: white;
		text-align: center;
		padding: 20rpx 0;

		.status {
			font-size: 40rpx;
			font-weight: bold;
		}

		.time {
			font-size: 26rpx;
			margin-top: 10rpx;

			.expired {
				font-weight: bold;
			}
		}
	}

	.content {
		height: 100%;
		min-height: 100vh;
		background-color: #141414;
		padding-bottom: 100rpx !important;
		position: relative;
		z-index: 2;

		/* #ifdef MP-WEIXIN */
		::v-deep .my-content {
			overflow-y: scroll;
			padding-bottom: 100rpx !important;
			margin-right: 0 !important;
		}

		/* #endif */

		.content_bg {
			position: fixed;
			z-index: -5;
			left: 0;
			top: 0;
			width: 100%;
		}

		.header {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 250rpx;
			color: #fff;
			font-weight: bold;
			font-size: 46rpx;

			.status {
				display: flex;
				align-items: center;

				.time_icon {
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.expired_at {
				display: flex;
				font-size: 24rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;

				.time {
					font-size: 32rpx;
				}
			}
		}

		.address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #030522;
			margin: 0 30rpx 30rpx 30rpx;
			padding: 30rpx;
			border-radius: 5rpx;
			color: white;

			.address_icon {
				width: 88rpx;
				height: 88rpx;
				margin: 0 40rpx;
			}

			.address_info {
				flex: 1;
				display: flex;
				flex-direction: column;
				/* height: 80rpx; */
				justify-content: space-between;

				.address_user {
					display: flex;
					align-items: flex-end;

					.username {
						font-size: 32rpx;
						margin-right: 20rpx;
						font-weight: bold;
					}

					.mobile {
						font-size: 28rpx;
					}
				}

				.address_detail {
					font-size: 26rpx;
					color: #808080;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; //2行
					-webkit-box-orient: vertical;
				}
			}
		}

		.goods_box {
			display: flex;
			flex-direction: column;

			border-radius: 5rpx;
			padding-bottom: 10rpx;
			margin: 0 30rpx;
			color: #808080;

			.goods_header {
				height: 80rpx;
				line-height: 80rpx;
				font-weight: bold;
				/* margin-left: 30rpx; */
				font-size: 32rpx;
				display: flex;
				align-items: center;
				color: white;

				.goods_header_dot {
					width: 10rpx;
					height: 30rpx;
					margin-right: 5rpx;
					background-color: #a361f6;
					color: #a361f6;
					border-radius: 4rpx;
				}
			}

			.order_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #030522;

				.order_label {
					margin-left: 30rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: white;
				}

				.order_text {
					margin-right: 30rpx;
					font-size: 28rpx;
					display: flex;
					align-items: baseline;
					color: #999;

					.price_dot,
					.price_float,
					.price_icon {
						font-size: 24rpx;
					}
				}

				&.remark {
					flex-direction: column;
					align-items: flex-start;
					height: 140rpx;
					justify-content: center;
				}

				.order_remark {
					margin-left: 30rpx;
					margin-top: 30rpx;
					color: white;
				}
			}
		}

		.goods_content {
			display: flex;
			flex-direction: column;
			max-height: 440rpx;
			overflow: scroll;
			background-color: #030522;

			.goods_info {
				display: flex;
				padding: 10rpx 30rpx 10rpx 0;

				.goods-image-bg {
					background-size: 100% 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 20rpx 30rpx;

					.goods_image {
						width: 120rpx;
						height: 120rpx;
						/* border: 1rpx solid #f7f7f7; */
					}
				}

				.goods_item {
					flex: 1;
					display: flex;
					justify-content: space-around;
					flex-direction: column;
					color: white;

					.goods_name {
						width: 100%;
						font-size: 26rpx;
						-webkit-line-clamp: 3;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					.goods_attr {
						.goods_attr_value {
							font-size: 24rpx;
							background-color: rgba(255, 255, 255, 0.2);
							padding: 5rpx 10rpx;
							color: white;
						}
					}

					.goods_price_num {
						display: flex;
						justify-content: space-between;
						width: 100%;
						align-items: baseline;

						.goods_price {
							display: flex;
							align-items: baseline;
							font-size: 28rpx;

							.goods_price_dot,
							.goods_price_float,
							.goods_price_icon {
								font-size: 24rpx;
							}
						}

						.goods_num {
							color: #999;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.order_box {
			display: flex;
			flex-direction: column;
			margin: 30rpx 30rpx 60rpx 30rpx;
			border-radius: 5rpx;
			padding-bottom: 10rpx;
			color: #808080;

			.order_header {
				height: 80rpx;
				line-height: 80rpx;
				font-weight: bold;
				/* margin-left: 30rpx; */
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				/* margin-bottom: 20rpx; */
				color: white;

				.order_header_dot {
					width: 10rpx;
					height: 30rpx;
					margin-right: 10rpx;
					background-color: #a361f6;
					color: #a361f6;
					border-radius: 4rpx;
				}
			}

			.order_item {
				background-color: #030522;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;

				.order_label {
					margin-left: 30rpx;
					font-weight: bold;
					color: white;
				}

				.order_text {
					margin-right: 30rpx;
					color: #999;
					font-size: 26rpx;
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background-color: #030522;
			align-items: center;
			color: white;
			box-sizing: border-box;
			padding: 0 40rpx;

			.bottom_text {
				display: flex;
				align-items: baseline;
				flex-direction: column;
				margin-right: 10rpx;
				font-size: 24rpx;

				.bottom_text_num {
					margin-right: 10rpx;
					color: white;
				}

				.bottom_text_amount {
					font-weight: bold;
					display: flex;
					align-items: baseline;
					font-size: 24rpx;

					.amount_icon {
						color: white;
					}

					.amount_int {
						color: #ee5093;
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}

			.exchange_btn {
				width: 228rpx;
				height: 84rpx;
				line-height: 84rpx;
				font-size: 31rpx;
				font-weight: bold;
				margin-right: 10rpx;
				text-align: center;
				color: #fff;
				background-size: 100% 100%;

				&.cancel {
					filter: grayscale(1);
				}

				&.pay {}

				&.receive {}
			}
		}
	}
</style>